// 实现这个项目的构建任务

// 使用 gulp 构建工具
// 安装 gulp ，引入 src、dest方法 创建读取流、写入流
// 需要使用 series, parallel 方法，使任务可以串行或并行
// 使用 Watch 方法用于监视源文件变化。自动重新构建
const config = {
    build: {
        dist: 'dist',    // 部署目录
        public: 'public',
        src: 'src',
        path: {
            fonts: 'assets/fonts/**',
            images: 'assets/images/**',
            scripts: 'assets/scripts/*.js',
            styles: 'assets/styles/*.scss',
            pages: './**/*.html'
        }
    },
    data: {
        menus: [
            {
                name: 'Home',
                icon: 'aperture',
                link: 'index.html'
            },
            {
                name: 'Features',
                link: 'features.html'
            },
            {
                name: 'About',
                link: 'about.html'
            },
            {
                name: 'Contact',
                link: '#',
                children: [
                    {
                        name: 'Twitter',
                        link: 'https://twitter.com/shi1123'
                    },
                    {
                        name: 'About',
                        link: 'https://weibo.com/shi1123'
                    },
                    {
                        name: 'divider'
                    },
                    {
                        name: 'About',
                        link: 'https://github.com/shi1123'
                    }
                ]
            }
        ],
        pkg: require('./package.json'),
        date: new Date()
    }
}
const { src, dest, parallel, series, watch } = require('gulp'),
    autopfefixer = require('gulp-autoprefixer'),
    cleanCss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    htmlmin = require('gulp-htmlmin'),
    imagemin = require('gulp-imagemin'),
    browerSync = require('browser-sync').create(),
    plugins = require('gulp-load-plugins')(),// 为了减少插件的导入加载次数，使用 gulp-load-plugins 插件自动加载所用到的插件
    del = require('del'),// 导入 del 插件，清除指定文件
    clean = () => del([config.build.dist]),
    // 定义 css 任务，编译样式文件
    css = () => {
        return src(config.build.path.styles, { 
            base: config.build.src, 
            cwd: config.build.src 
        }).pipe(plugins.sass({ outputStyle: 'expanded' }))
        .pipe(autopfefixer())
        .pipe(cleanCss())//.pipe(rename({extname:".min.css"}))
        .pipe(dest(config.build.dist))
    },
    // 定义 js 任务，编译js文件
    js = () => {
        return src(config.build.path.scripts, { 
            base: config.build.src, 
            cwd: config.build.src 
        }).pipe(babel({presets:[require('@babel/preset-env')]}))
        .pipe(uglify())
        // .pipe(rename({extname:'.min.js'}))
        .pipe(dest(config.build.dist));
    },
    // 定义 html 任务，编译 HTML文件
    html = ()=> {
        return src(config.build.path.pages, { 
            base: config.build.src, 
            cwd: config.build.src 
        }).pipe(plugins.swig({ data: config.data }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS:true
        })).pipe(dest(config.build.dist));
    },
    // 定义 img 任务，复制压缩图片
    img = () => {
        return src(config.build.path.images, { 
            base: config.build.src,
             cwd: config.build.src 
            }).pipe(imagemin()).pipe(dest(config.build.dist));
    },
    // 定义 fonts 任务，复制压缩字体文件
    fonts = () => {
        return src(config.build.path.fonts, { base: config.build.src, cwd: config.build.src })
                .pipe(plugins.imagemin())
                .pipe(dest(config.build.dist))
    },
    // 定义 rest 任务，复制 public 下的文件
    rest = () => {
        return src(config.build.public)
                .pipe(dest(config.build.dist))
    },
    // 定义 serve 任务，开启服务器
    serve = () => {
        watch(config.build.path.styles, { cwd: config.build.src }, css);
        watch(config.build.path.scripts, { cwd: config.build.src }, js);
        watch(config.build.path.images, { cwd: config.build.src }, img);
        watch(config.build.path.fonts, { cwd: config.build.src }, fonts);
        watch(config.build.path.pages, { cwd: config.build.src }, html);
        watch(config.build.public, rest);
        browerSync.init({
            files:'./dist/**',
            notify: false,
            server: {
                baseDir: config.build.dist,
            },
            port: 3001
        });
    },
    // 串行任务，需要先清理旧的 dist 文件
    go = series(clean,parallel(css, js ,html,img,fonts,rest), serve);

module.exports ={
    go
}